<template>
	<!-- 15 -->
	<view>
	{{a}}	
	</view>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in  picArrs" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
	
	<!-- <view class="box" :class="Active ? 'box' : 'box1'">class类名绑定样式</view> -->
	<view 
	class="box" 
	:style="{
		width:'300px',
		height:300+'px',
		fontSize:size+'px'
		}">style内联样式</view>
</template>

<script setup>
import { ref } from 'vue';
const a = ref(5)
const picArrs = ref([
	'../../static/logo.png',
	'../../static/pic1.webp',
	'../../static/pic3.jpeg',
	'../../static/pic4.jpeg'])
	const Active = ref(false)
	const size = ref(30)
</script>

<style lang="scss">
swiper {
	width: 100vw;
	height: 200px;
	border: 1px solid #fffff;
	swiper-item {
		width: 100%;
		height: 100%;
		background: pink;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.box {
	width: 200px;
	height: 200rpx;
	background: orange;
}
.box1 {
	width: 200rpx;
	height: 200rpx;
	background: red;
}
</style>
